<template>
	<view class="content">
		<view class="order-step box" style="overflow: hidden;">
			<my-step  
			:options="orderDetail.orderFlows" 
			:active='active'></my-step>
			
		</view>
		<view class="mainTitle">
			服务车辆
		</view>
		<view class="carInfo box">
			<car-item :cartInfo='orderDetail.cartInfo'></car-item>
		</view>
		<view class="mainTitle">
			洗车方案
		</view>
		<view class="carInfo box">
			<plan-item :planInfo='orderDetail.washMenu'></plan-item>
		</view>
		<view class="allPrice">
			<text class="all">合计:&nbsp;</text>
			<text class="dw">￥</text>
			<text class="price">{{orderDetail.cost}}</text>
		</view>
		<view class="box" style="margin-bottom: 20rpx;">
			<view class="soli-item">
				<view class="title">订单号</view>
				<view class="value">{{orderDetail.sn}}</view>
			</view>
			<view class="soli-item">
				<view class="title">服务地址</view>
				<view class="value">
					<view>{{orderDetail.fullAddress}}</view>
					<image :src="$getImageSrc('home_ic_dw.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="soli-item">
				<view class="title">联系人</view>
				<view class="value" @click="$callPhone(orderDetail.linkPhone)">
					<view>{{orderDetail.linkPhone}}</view>
					<image :src="$getImageSrc('phone.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="soli-item">
				<view class="title">服务时间</view>
				<view class="value">{{orderDetail.appointmentTime}}</view>
			</view>
		</view>
		<view class="soli-item box" style="width: 686rpx;margin-bottom: 200rpx;">
			<text class="title">备注</text>
			<text class="value">{{orderDetail.remark}}</text>
		</view>
		<view class="footer" v-if='orderDetail.orderStatus - 3 === 0 || orderDetail.orderStatus - 1 === 0'>
			<button v-if='orderDetail.orderStatus == 3' class="btn" @click="finishServe" type="default">结束服务</button>
			<button v-if='orderDetail.orderStatus == 1' class="btn" @click="startServe" style="background: #02B1AA;" type="default">开始服务</button>
			<button v-if='orderDetail.orderStatus == 1' class="btn" @click="zdFn" style="background: #F96501;" type="default">请求转单</button>
			
		</view>
		<my-popup
		   ref="myPopup"
		   tipInfo="是否确认请求转单？转单后将不能再重新接收此订单。" 
		   leftBtn="确认"
		   rightBtn="暂不转单"
		   @clickFn="sureOrder"
		></my-popup>
	</view>
</template>

<script>
	import {orderDetail, transferOrder} from '@/untils/api'
	export default {
		data() {
			return {
				orderDetail:null,
				active:0
			};
		},
		onShow(){
			this.getDetail()
		},
		methods:{
			startServe(){
				 this.$setStorageSync('orderInfo', this.orderDetail)
				 let sn = this.orderDetail.sn;
				 uni.navigateTo({
					url:`/subpackage/index/serveInfo?type=start&sn=${sn}`
				 })
			},
			finishServe(){
				this.$setStorageSync('orderInfo', this.orderDetail)
				let sn = this.orderDetail.sn;
				uni.navigateTo({
					url:`/subpackage/index/serveInfo?type=finish&sn=${sn}`
				})
			},
			zdFn(){
				this.$refs.myPopup.$refs.myPopup.open()
			},
			sureOrder(type){
			 if(type === 'left'){
				transferOrder({sn:this.orderDetail.sn}).then((res) => {
					if(res.code - 200 === 0){
						uni.showToast({
							icon:'none',
							title:'转单成功',
							success:()=>{
								uni.switchTab({
									url:'/pages/awaitOrder/index'
								})
							}
						})
					}
				}) 
			 }
			},
			getDetail(){
				const {sn} = this.$mp.query
				orderDetail({sn}).then((res) => {
					console.log(res)
					if(res.code - 200 === 0){
						this.orderDetail = res.data
						this.orderDetail.washMenu.cost = res.data.cost
						this.active = this.orderDetail.orderFlows.length
						if(this.orderDetail.orderStatus - 3 === 0){
							this.orderDetail.orderFlows[0].btn = '查看签到'
							this.orderDetail.orderFlows[0].btnType = 'start'
						}
						if(this.orderDetail.orderStatus - 4 === 0){
							this.orderDetail.orderFlows[1].btn = '查看签到'
							this.orderDetail.orderFlows[1].btnType = 'start'
							this.orderDetail.orderFlows[0].btn = '查看签退'
							this.orderDetail.orderFlows[0].btnType = 'finish'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .content{
	  background: #F8F8F8;
	  height: 100%;
	  overflow: auto;
	  .order-step{
		  margin-bottom: 40rpx;
	  }
	  .carInfo{
		  margin-top: 40rpx;
		  margin-bottom: 20rpx;
	  }
	  .mainTitle{
		  width: 686rpx;
		  margin: 0 auto;
	  }
	  .refund{
		  margin-bottom: 40rpx;
		  .refund-tip{
			  font-size: 28rpx;
			  color: #AEB3B3;
			  text-indent: 20rpx;
			  line-height: 80rpx;
		  }
	  }
	  .soli-item{
	  		  width: 96%;
	  		  display: flex;
	  		  line-height: 80rpx;
	  		  border-bottom: 1px solid #F8F8F8;
	  		  justify-content: space-between;
	  		  align-items: flex-start;
	  		  margin: 0 auto;
	  		  font-size: 30rpx;
	  		  .title{
	  			  width: 200rpx;
	  			  color: #2a2b2b;
	  			  text-indent: 20rpx;
	  		  }
	  		  .value{
	  			  text-align: right;
	  			  color: #AEB3B3;
	  			  width: calc(100% - 220rpx);
	  			  word-wrap: break-word;
	  			  display: flex;
	  			  justify-content: flex-end;
	  			  align-items: center;
	  			  image{
	  				  width: 30rpx;
					  // height: 30rpx;
	  				  margin-left: 8rpx;
	  			  }
	  		  }
	  		  .phone{
	  			  color: #02B1AA;
	  			  margin-right: 20rpx;
	  		  }
	  }
	  .allPrice{
		  width: 686rpx;
		  margin: 0 auto 20rpx;
		  text-align: right;
		  .all{
			  font-weight: 800;
			  font-size: 30rpx;
			  color: #2A2B2B;
		  }
		  .dw{
			  font-size: 24rpx;
			  color: #F96501;
		  }
		  .price{
			  font-size: 40rpx;
			  color: #F96501;
		  }
	  }
	  .footer{
		  height: 180rpx;
		  
		  .btn{
			  width: 240rpx;
			  height: 88rpx;
			  background: #FF3E3E;
			  line-height: 88rpx;
			  float: right;
			  color: #fff;
			  margin-top: 50rpx;
			  margin-right: 60rpx;
			  font-size: 32rpx;
		  }
	  }
  }
</style>
